<template>
  <div style="min-height: 500px;margin-top: 40px;" v-loading="loading" element-loading-background="rgba(255, 255, 255 0.8)">
    <div v-show="!isSuccess && hasHome">
      <div class="flex-row ">
        <div class="material-textfield green form-left" :class="{'validate-err': errors.has('positionName')}">
          <input type="text" required v-model="position.positionName" v-validate="'required|max:30'" name="positionName" autocomplete="off" />
          <label data-content="职位名称*" ></label>
        </div>
        <div class="material-textfield green form-right" :class="{'validate-err': errors.has('nature')}">
          <el-select v-model="position.nature " placeholder="" class="width-full" v-validate="'required'" name="nature">
            <el-option
              v-for="item in natures"
              :filterable="true"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label data-content="职位性质*"></label>
        </div>
      </div>
      <div class="flex-row " >
        <div class="material-textfield green form-left" :class="{'validate-err': errors.has('cityName')}">
          <city-cascader v-model="position.workCity"
          ref="workcity"
          v-validate="'required|city'" name="cityName"
          :provinceCode.sync="position.provinceCode"
          :cityCode.sync="position.cityCode"
          :areaCode.sync="position.areaCode"
          ></city-cascader>
          <label data-content="工作地址*"></label>
        </div>
        <div class="material-textfield green form-right">
          <input type="text" required v-model="position.workAddress"/>
          <label data-content="详细地址"></label>
        </div>
      </div>
      <div class="flex-row ">
        <div class="material-textfield green form-left" :class="{'validate-err': errors.has('education')}">
          <el-select v-model="position.education " placeholder="" class="width-full" v-validate="'required'" name="education">
            <el-option
              v-for="item in educationes"
              :filterable="true"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label data-content="学历要求*"></label>
        </div>
        <div class="material-textfield green form-right" :class="{'validate-err': errors.has('number')}">
          <!-- <el-input-number v-model="position.number"  :min="1" :max="10" label="描述文字"></el-input-number> -->
          <input type="text" required v-model="position.number" v-validate="'required|posiInt'" name="number" />
          <label data-content="招聘人数*"></label>
        </div>
      </div>

      <div class="flex-row ">
        <div class="material-textfield green form-left" :class="{'validate-err': errors.has('salary')}">
          <el-select v-model="position.salary " placeholder="" class="width-full" v-validate="'required'" name="salary">
            <el-option
              v-for="item in salaries"
              :filterable="true"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label data-content="薪资待遇*"></label>
        </div>
        <div class="material-textfield green form-right" :class="{'validate-err': errors.has('workYear')}">
          <el-select v-model="position.workYear " placeholder="" class="width-full" v-validate="'required'" name="workYear">
            <el-option
              v-for="item in years"
              :filterable="true"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label data-content="工作经验*"></label>
        </div>
      </div>

      <div class="flex-row ">
        <div class="material-textfield green form-left" :class="{'validate-err': errors.has('positionName')}">
          <input type="text" required value="30天" disabled/>
          <label data-content="有效期限(不可编辑)" ></label>
        </div>
      </div>

      <div class="textarea-con" :class="{'validate-err': errors.has('companyIntroduce')}" style="margin-bottom: 10px;">
        <label data-content="职位描述*">职位描述*&nbsp;&nbsp;&nbsp;<span style="color: #C0C0C0;">不超过3000字</span></label>
        <textarea rows="8" class="width-full" v-model="position.description" v-validate="'required|max:3000'" name="companyIntroduce"></textarea>
      </div>

      <el-col :span="24" style="margin-top: 45px;text-align: center;">
        <el-button type="success" round class="width-200" @click="confirm()">保存并发布</el-button>
      </el-col>
    </div>
    
    <div class="va-container flex-column-center promp-msg" v-show="isSuccess">
      <img src="../../assets/shenhetongguo.jpg" alt="" style="margin-top: 100px;">
      <h2 v-if="!$route.query.id">发布成功</h2>
      <h2 v-if="$route.query.id">修改成功</h2>
      <el-button type="success" class="width-200 " round @click="addNew()" v-if="!$route.query.id">
        新增职位
      </el-button>
      <el-button type="success" class="width-200 " round @click="$router.go(-1)" v-if="$route.query.id">
        返回职位管理
      </el-button>
    </div>

    <div class="va-container flex-column-center promp-msg" v-show="!hasHome">
      <img src="../../assets/gongnengtishi.png" alt="" style="margin-top: 100px;">
      <h2>尚未编辑企业主页内容，请先编辑企业主页</h2>
      <el-button type="success" class="width-200 mt-3" round @click="ecedit()">
        编辑企业主页
      </el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

let gen = async function (self) {
  try {
    self.loading = true
    let hasHomeRes = await axios.post('/mscs/tender/findHomepageByUserId', self.$paramsConvert({userId: self.$store.state.user.user.user.userId}))
    // console.log('hasHomeRes', hasHomeRes)
    if (hasHomeRes.data.code === 1) {
      if (!hasHomeRes.data.data) {
        self.hasHome = false
        return
      }
    } else {
      self.$codeError(hasHomeRes)
      return
    }

    if (!self.$route.query.id) {
      return
    }
    let positionRes = await axios.post('/mscs/position/findPositionData', self.$paramsConvert({positionId: self.$route.query.id}))
    if (positionRes.data.code === 1) {
      self.position = Object.assign({}, self.position, positionRes.data.data)
    } else {
      self.$codeError(positionRes)
    }
  } catch (error) {
    self.$catchError(error)
  } finally {
    self.loading = false
  }
  
}

export default {
  name: 'publishrecruit',
  title: '发布招聘',
  props: ['id'],
  data() {
    return {
      loading: false,
      isSuccess: false,
      hasHome: true, 
      position: {
        userId: this.$store.state.user.user.user.userId,
        positionName: '',
        nature: '',
        workCity: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        workAddress: '',
        education: '',
        number: '',
        salary: '',
        description: ''
      },
      natures: [
        {label: '全职', value: 'FULL_TIME'},
        {label: '兼职', value: 'PART_TIME'},
        {label: '实习', value: 'PRACTICE'}
      ],
      educationes: [
        {label: '博士', value: 'DOCTOR'},
        {label: '硕士', value: 'MASTER'},
        {label: '本科', value: 'BACHELOR'},
        {label: '大专', value: 'COLLEGE'},
        {label: '中技', value: 'TECHNICAL_SCHOOL'},
        {label: '中专', value: 'TECHNICAL_SECONDARY_SCHOOL'},
        {label: '高中以下', value: 'HIGH_SCHOOL'}
      ],
      salaries: [
        {label: '1k以下', value: '1k以下'},
        {label: '1k-2k', value: '1k-2k'},
        {label: '2k-4k', value: '2k-4k'},
        {label: '4k-6k', value: '4k-6k'},
        {label: '6k-8k', value: '6k-8k'},
        {label: '8k-10k', value: '8k-10k'},
        {label: '10k-15k', value: '10k-15k'},
        {label: '15k-20k', value: '15k-20k'},
        {label: '20k以上', value: '20k以上'}
      ],
      years: [
        {label: '经验不限', value: '经验不限'},
        {label: '1-3年', value: '1-3年'},
        {label: '3-5年', value: '3-5年'},
        {label: '5-10年', value: '5-10年'},
        {label: '10年以上', value: '10年以上'}
      ]
    }
  },
  mounted () {
    gen(this)
  },
  methods: {
    confirm () {
      // 防止401发生userid串行问题
      this.position.userId = this.$store.state.user.user.user.userId
      this.$validator.validate().then(result => {
        if (result) {
          this.loading = true
          axios.post('/mscs/position/createOrUpdatePosition', this.position).then(res => {
            if (res.data.code === 1) {
              this.isSuccess = true
              this.$refs.workcity.clearAll()
              // 清理填写内容
              this.$clearObj(this.position)
              // this.position.userId = this.$store.state.user.user.user.userId
              // 重置验证
              this.$validator.reset()
            } else {
              this.$codeError(res)
            }
          }).catch(error => {
            this.$catchError(error)
          }).finally(() => {
            this.loading = false
          })
        } else {
          this.$alert('保存失败，信息填写不完整或不正确，其中标注红色为未填写或填写错误', {
            confirmButtonText: '确定',
          })
        }
      })
    },
    addNew () {
      this.isSuccess = false
    },
    ecedit () {
      this.$router.push({name: 'ecedit'})
    }
  }
}
</script>